<!-- 个人信息 -->
<template>
  <div class="container-app">
    <div class="bg-white">
      <div class="row head">
        <q-separator vertical size="3px" class="leftLine bg-primary" />
        <span class="q-ml-md name">个人信息</span>
        <q-space />
      </div>
    </div>
    <OtherPerson />
    <div class="row">
      <div class="bg-white q-mt-md col-lg-6 col-md-12">
        <div class="row head">
          <q-separator vertical size="3px" class="leftLine bg-primary" />
          <span class="q-ml-md name">告警通知模式</span>
          <q-space />
          <q-btn class="q-mr-sm q-mt-sm" style="width:58px;height:30px;" dense unelevated color="primary" label="添加"
            @click="add" />
          <q-btn class="q-mr-sm q-mt-sm" style="width:58px;height:30px;" dense unelevated color="primary" label="编辑"
            @click="change" />
          <q-btn class="q-mr-sm q-mt-sm" style="width:58px;height:30px;" dense unelevated color="primary" label="删除"
            @click="delectModel" />
        </div>
        <div class="patterns">
          <Pattern ref="chlid" />
        </div>
      </div>
      <div class="bg-white q-ml-md q-mt-md col-lg-6 col-md-12 gjCss" style="flex:1;">
        <div class="row head">
          <q-separator vertical size="3px" class="leftLine bg-primary" />
          <span class="q-ml-md name">告警通知方式</span>
          <q-space />
        </div>
        <SendWay />
      </div>
    </div>
    <div class="row q-col-gutter-md">
      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 q-mt-md">
        <div class="bg-white" id="asset_list" :class="IOSfull ? 'IOSfull' : ''">
          <div :class="rotate ? 'TableY' : $q.fullscreen.isActive ? 'Nrotate' : 'Nrotate2'">
            <div class="row head">
              <q-separator vertical size="3px" class="leftLine bg-primary" />
              <span class="q-ml-md name">关注的机台列表</span>
              <q-space />
              <q-btn flat round dense :icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'"
                @click="toggleFullscreen" class="q-mr-sm" />
            </div>
            <AssetList />
          </div>
        </div>
      </div>
    </div>
    <!-- <q-separator /> -->
  </div>
</template>

<script>
import OtherPerson from './component/otherPerson'
import SendWay from 'src/pages/common/sendWay'
import AssetList from './component/assetAndSiteList/assetList'
import Pattern from 'src/pages/common/pattern.vue';
import { mapGetters } from 'vuex';
import wetherScroll from 'src/components/mixins/wetherScroll.js'

export default {
  mixins: [wetherScroll],
  name: 'PersonInfo',
  data() {
    return {
      rotate: false,
      IOSfull: null,
    };
  },

  components: {
    OtherPerson,
    SendWay,
    AssetList,
    Pattern
  },

  computed: {
    ...mapGetters(['themeColor', 'device']),
  },

  watch: {
    '$q.fullscreen.isActive'(val) {
      this.$route.path == '/personInfo' && this.device == 'mobile' ? this.rotate = val : this.rotate = false;
      if (this.rotate) {
        this.wetherScroll();
      } else {
        this.removeWetherScroll();
      }
    },
  },
  mounted() { },

  methods: {
    add() {
      this.$refs.chlid.add();
    },
    change() {
      this.$refs.chlid.changeItem();
    },
    delectModel() {
      this.$refs.chlid.deleteModel();
    },
    // 全屏
    toggleFullscreen() {
      this.$nextTick(_ => {
        let dom = document.getElementById('asset_list')
        let nav = window.navigator
        let ua = nav.userAgent

        if (/iPhone|iPod|iPad/.test(ua)) {
          this.IOSfull = !this.IOSfull
          let con = document.getElementsByClassName('container-app')
          if (this.IOSfull) {
            dom.style.width = window.innerHeight + 'px'
            con[0].style.padding = '0px'
          } else {
            dom.style.width = ''
            con[0].style.padding = '30px'
          }
        } else {
          this.$q.fullscreen.toggle(dom).then(_ => {
          }).catch(error => {
            console.log(error)
          })
        }
      })
    }
  }
}

</script>
<style lang='scss' scoped>
@media (max-width: 1439px) {
  .gjCss {
    width: 100% !important;
    flex: none !important;
    margin-left: 0px !important;
  }
}

@media (max-width: 393px) {
  .patterns {
    margin-top: 30px;
  }
}
</style>
